<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 购物车 </title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .head {
            /*padding-left: 38px;*/
            margin-top: 20px;
            width: 100%;
        }

        .head-left {
            position: relative;
            width: 1340px;
            height: 50px;
            left: calc(50% - 672px);
            padding-top: 10px;
        }

        .head-left #logo {
            position: absolute;
            top: 16px;
            width: 90px;
            height: 65px;
            display: inline-block;
            line-height: 50px;

        }

        .head-name {
            position: relative;
            left: 97px;
        }

        .head-left #UserName {
            position: relative;
            top: -5px;
            /*left: 0px;*/
            line-height: 50px;
            font-size: 50px;
            color: #01b6eb;
        }

        .head-left #CartLogo {
            position: relative;
            width: 70px;
            height: 70px;
            top: 8px;
            left: 2px;
        }

        .head-left #cart_back {
            position: absolute;
            width: 58px;
            height: 58px;
            right: calc(50% - 672px);
            top: 32px;
        }

        .head-left #cart_back:hover {
            filter: brightness(1.9999);
            cursor: pointer;
        }


        .top-body {
            position: absolute;
            width: 1340px;
            height: 80px;
            border: 2px solid;
            border-bottom: 0px;
            border-color: #aab0ac;
            /*margin: 30px 0px 0px 38px;*/
            left: calc(50% - 672px);
            top: 115px;
            background-color: #f7f7f7;
        }

        .mid-body {
            position: absolute;
            width: 1340px;
            height: 480px;
            overflow: auto;
            /*margin: 0px 0px 0px 38px;*/
            left: calc(50% - 672px);
            top: 197px;

            border: 2px solid;
            border-top: 0px;
            border-bottom: 0px;
            border-color: #aab0ac;
            background-color: #f7f7f7;
        }

        .mid-body #drop a {
            position: relative;
            left: 7px;
        }

        .mid-body #drop a:hover {
            filter: brightness(1.9);
        }

        .thead {
            margin: 4px 70px 0px 70px;
            border-color: #aab0ac;
            border-top: 0px;
            border-right: 0px;
            border-bottom: 0px;
            border-left: 0px;
        }

        .thead tr {
            height: 80px;
            text-align: center;
        }

        .thead td {
            width: 200px;
            height: 80px;
            border-top: 0px;
            border-right: 0px;
            border-bottom: 0px;
            border-left: 0px;
            border-color: #aab0ac;
            font-family: Arial;
            color: black;
            font-size: 24px;
        }

        .tab {
            margin: 0px 70px 40px 70px;
            border-color: #edf0ed;
            border-top: 0px;
            border-right: 2px;
            border-left: 2px;
            border-bottom: 2px;

        }

        .tab tr {
            height: 80px;
            text-align: center;
            background-color: #ffffff;
            line-height: 20px;
        }

        .tab td {
            height: 80px;
            width: 200px;
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-top: 1px solid;
            border-color: #edf0ed;
            font-family: Arial;
            color: #5f625f;
            font-size: 20px;
            text-align: center;
            position: relative;
            left: 4px;
        }

        .tab th {
            width: 200px;
            height: 80px;
            border-top: 0px;
            border-right: 0px;
            border-bottom: 1px solid;
            border-left: 0px;
            border-color: #edf0ed;
        }

        .logo_minus {
            position: relative;
            top: 3px;
            right: 10px;
            cursor: pointer;
        }

        .logo_minus:hover {
            filter: brightness(1.3);
        }

        .logo_add {
            position: relative;
            top: 3px;
            left: 10px;
            cursor: pointer;
        }

        .logo_add:hover {
            filter: brightness(1.3);
        }

        .isEmpty_cart {
            display: none;
            position: absolute;
            top: 150px;
            left: 460px;
            font-size: 25px;
            color: crimson;
        }

        .isEmpty_cart:hover {
            filter: brightness(1.6);
            text-decoration: underline;
        }


        .bottom-body {
            position: absolute;
            height: 110px;
            width: 1340px;
            left: calc(50% - 672px);
            top: 677px;
            /*margin: 0px 0px 0px 38px;*/
            border: 2px solid;
            border-top: 0px;
            border-color: #aab0ac;
            background-color: #f7f7f7;
            color: #5f625f;
        }

        .bottom-body #pay {
            position: relative;
            top: 30px;
            left: calc(50% - 597.5px);
            border-style: solid;
            border-width: 2px;
            border-color: #edf0ed;
            height: 45px;
            width: 1185px;
            line-height: 45px;
            background-color: #ffffff;
        }

        .bottom-body #clearCart {
            position: relative;
            top: 5px;
            left: 100px;
        }

        .bottom-body #clearAll {
            width: 35px;
            height: 35px;
        }

        .bottom-body #clearAll:hover {
            filter: brightness(1.99999);
            cursor: pointer;
        }

        .bottom-body #goShopping {
            position: relative;
            left: 245px;
            top: 6px;
        }

        .bottom-body #goShopping:hover {
            filter: brightness(1.9);
            cursor: pointer;
        }

        .bottom-body #goOnShopping {
            width: 35px;
            height: 35px;
        }

        .bottom-body #mes {
            width: 585px;
            position: absolute;
            left: 600px;
        }

        .bottom-body #toPay {
            position: absolute;
            top: 7.7px;
            width: 120px;
            height: 30px;
            font-size: 15px;
            border-color: #006cbe;
            background-color: #006cbe;
            color: #edf0ed;
            border-radius: 20px;
            border: 1px solid;
            word-spacing: 13px;
            left: 435px;
        }

        .bottom-body #toPay:hover {
            filter: brightness(1.25);
            cursor: pointer;
        }

        .bottom-body #gong {
            position: absolute;
            top: -0.5px;
            left: 30px;
            font-size: 18px;

        }

        .bottom-body #totalCnt {
            position: absolute;
            left: 70px;
            color: red;
            font-size: 18px;
        }

        .bottom-body #pm {
            position: absolute;
            left: 105px;
            font-size: 18px;
        }

        .bottom-body #totalMoney {
            position: absolute;
            left: 215px;
            font-size: 18px;
        }

        .bottom-body #totalPrice {
            position: absolute;
            left: 298px;
            top: 1px;
            font-size: 18px;
            color: red;
        }

        .bottom-body #yuan {
            position: absolute;
            top: 0.5px;
            left: 370px;
            font-size: 18px;
        }

        .bottom-body #bill {
            position: relative;
            top: -6px;
            left: -5.5px;

        }

        .window_css {
            z-index: 10;
            -moz-opacity: 0.18;
            opacity: .7;
            filter: alpha(opacity=18);
        }

        .hoverWindow_css {
            display: none;
            position: absolute;
            top: 15%;
            left: 25%;
            width: 50%;
            height: 60%;
            border: 0px solid;
            border-radius: 30px;
            background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
            box-shadow: 0px 20px 30px #989595;
            z-index: 11;
            transition: 1.25s;

        }

        .hoverWindow_css:hover {
            transition: 1.5s;
            transform: scale(1.06);
        }

        .hoverWindow_css #cancel_img {
            position: absolute;
            top: 20px;
            left: 655px;
            width: 35px;
            height: 35px;
            cursor: pointer;
        }

        .hoverWindow_css #cancel_img:hover {
            filter: brightness(1.5);
        }

        .box {
            margin: 20px auto;
            /*background-color: pink;*/
            width: 92%;
            height: 50%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: space-between;
        }

        .box img {
            width: 100%;
            height: 100%;
        }

        .one {
            /*flex: 1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
            /*background-color: skyblue;*/
        }

        .two {
            /*flex: 1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
            /*background-color: skyblue;*/
        }

        .three {
            /*flex:1;*/
            width: 30%;
            height: 80%;
            border: 1.5px solid #aab0ac;
        }

        .paySuccess {
            width: 400px;
            height: 140px;
            position: absolute;
            left: calc(50% - 150px);
            top: calc(50% - 140px);
            background-color: #f1f1f1;
            z-index: 10;
            display: none;
            cursor: pointer;
        }

        .payImg {
            width: 200px;
            height: 50px;
            margin: 10px auto;
            /*background-color: skyblue;*/
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }

        .payImg img {
            /*display: inline-block;*/
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .payImg p {
            display: inline-block;
            margin-left: 8px;
        }

        .paybtn {
            background-color: rgba(23, 204, 122);
            width: 60px;
            height: 30px;
            color: white;
            font-size: 16px;
            border: 1px solid white;
            margin-left: calc(50% - 30px);
            margin-top: 12px;
            cursor: pointer;
        }

        .paybtn:hover {
            filter: brightness(1.1);
        }
    </style>
</head>
<body>

<!--支付成功是填出的盒子-->
<div class="paySuccess">
    <div class="payImg"><img src="./images/支付成功.png" alt="">
        <p>支付成功！</p></div>
    <button class="paybtn">确定</button>
</div>


<div id="window">
    <!--      头部-->
    <div class="head">
        <div class="head-left">
            <img src="images/logo_register.png" alt="" id="logo">
            <div class="head-name">
                <span id="UserName"></span>
                <img src="images/cart.png" alt="" id="CartLogo">
            </div>

            <!--返回首页-->
            <img src="images/返回主界面.png" title=" 返回主页面 " id="cart_back">
        </div>
    </div>

    <div>
        <!--购物车数据-->
        <div id="top-body" class="top-body">
            <table cellspacing="0" border="1" class="thead">
                <thead class="thead">
                <tr>
                    <td> 图 片</td>
                    <td> 书 名</td>
                    <td> 数 量</td>
                    <td> 单 价</td>
                    <td> 总 价</td>
                    <td> 操 作</td>
                </tr>
                </thead>
            </table>
        </div>
        <div id="mid-body" class="mid-body">
            <table class="tab" border="1" cellspacing="0" id="bookTable">

                <tbody>
                <!--          <tr>-->
                <!--            <td><img src="images/bookImg.png" alt="" style="width: 70px; height: 70px"></td>-->
                <!--            <td></td>-->
                <!--            <td>-->
                <!--              <img src="images/minus.png" alt="" width="20x" height="20px" class="logo_minus"  >-->
                <!--              <span></span>-->
                <!--              <img src="images/add.png" alt="" width="20px" height="20px" class="logo_add" >-->
                <!--            </td>-->
                <!--            <td></td>-->
                <!--            <td></td>-->
                <!--            <td id="drop"><a href="#" class="deleteById" >-->
                <!--              <img src="images/delete.png" alt="删除" title=" 删  除 " width="30px" height="30px">  </a></td>-->
                <!--          </tr>-->


                </tbody>

            </table>
            <a href="#" class="isEmpty_cart"> 亲，购物车为空哦，点击我去购物吧！</a>
        </div>

        <!--        对购物车进行处理-->
        <div id="bottom-body" class="bottom-body">

            <div id="pay" style="display: block">
                <span id="clearCart"><img src="images/logo_ClearCart.png" alt="清空购物车" title=" 清空购物车 "
                                          id="clearAll"></span>
                <span id="goShopping"><img src="images/GoOnShopping.png" alt="继续购物" title=" 继续购物 "
                                           id="goOnShopping"></span>


                <span id="mes">
              <span id="gong">共</span>
              <span id="totalCnt"></span>
              <span id="pm">件商品</span>
              <span id="totalMoney">总金额</span>
              <span id="totalPrice">  </span>
              <span id="yuan">元</span>
              <button id="toPay"><img src="images/pay.png" alt="支付" width="25px" height="25px"> <span
                      id="bill"> 结 算 </span></button>
          </span>
            </div>

        </div>
    </div>
</div>


<div id="hoverWindow" class="hoverWindow_css">
    <img src="images/backToCart.png" alt="" id="cancel_img" title=" 返回购物车 ">
    <h1 style="text-align: center;margin-top: 70px; color: #54bd77; ">请扫码支付</h1>
    <div class="box">
        <div class="one"><img src="./images/xg.jpg" alt=""></div>
        <div class="two"><img src="./images/ftw.jpg" alt=""></div>
        <div class="three"><img src="./images/zxb.jpg" alt=""></div>
    </div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    const cart = JSON.parse(sessionStorage.getItem("cart"));
    if (cart == null || cart.totalCnt == 0) {
        const isEmpty_cart = document.getElementsByClassName("isEmpty_cart");
        const pay = document.getElementById("pay")
        isEmpty_cart[0].style.display = 'block';
        pay.style.display = 'none';


        isEmpty_cart[0].addEventListener('click', function () {
            if (sessionStorage.getItem("isAdmin") != null) {
                location.href = "/Admin.html"
            } else {
                location.href = "/HomePage.html"
            }
        })
    } else {
        const items = cart.items;
        let tableData = ""
        for (let key in items) {
            if (items.hasOwnProperty(key)) {
                tableData += "<tr>\n" +
                    "            <td><img src=\"images/bookImg.png\" alt=\"\" style=\"width: 70px; height: 70px\"></td>\n" +
                    "            <td class=\"bookName\">" + items[key].name + "</td>\n" +
                    "            <td>\n" +
                    "              <img src=\"images/minus.png\" alt=\"\" width=\"20x\" height=\"20px\" class=\"logo_minus\"  flag=\"1\">\n" +
                    "              <span class=\"bookCnt\">" + items[key].bookCnt + "</span>\n" +
                    "              <img src=\"images/add.png\" alt=\"\" width=\"20px\" height=\"20px\" class=\"logo_add\" >\n" +
                    "            </td>\n" +
                    "            <td class=\"unitPrice\">" + items[key].book_UnitPrice + "</td>\n" +
                    "            <td class=\"allPrice\">" + items[key].book_allPrice + "</td>\n" +
                    "            <td id=\"drop\"><a href=\"#\" class=\"deleteById\">\n" +
                    "              <img src=\"images/delete.png\" alt=\"删除\" title=\" 删  除 \" width=\"30px\" height=\"30px\">  </a></td>\n" +
                    "          </tr>\n"
            }
        }
        document.getElementById("bookTable").innerHTML = tableData;


        const totalCnt = document.getElementById("totalCnt");
        totalCnt.innerText = JSON.parse(sessionStorage.getItem("cart")).totalCnt;
        const totalPrice = document.getElementById("totalPrice");
        totalPrice.innerText = JSON.parse(sessionStorage.getItem("cart")).totalPrice;

        var logo_minus = document.getElementsByClassName("logo_minus");
        var logo_add = document.getElementsByClassName("logo_add");
        var deleteById = document.getElementsByClassName("deleteById");
        var i = 0;
        for (let key in items) {
            if (items.hasOwnProperty(key)) {
                logo_minus[i].addEventListener('click', function () {
                    this.setAttribute("bookId", key)
                })
                logo_add[i].addEventListener('click', function () {
                    this.setAttribute("bookId", key)
                })
                deleteById[i].addEventListener('click', function () {
                    this.setAttribute("bookId", key)
                })
                deleteById[i].addEventListener('click', function () {
                    this.setAttribute("bookName", items[key].name)
                })
            }
            i++;
        }
    }


    //用户名
    var UserName = document.getElementById("UserName");
    var user = JSON.parse(sessionStorage.getItem("user"))
    if (user != null) {
        UserName.innerText = "_" + user.userName + "_";
    }

    //对cart_back返回主页面时判断时admin还是user主页面
    const cart_back = document.getElementById("cart_back");
    cart_back.addEventListener('click', function () {
        if (sessionStorage.getItem("isAdmin") != null) {
            location.href = "/Admin.html"
        } else {
            location.href = "/HomePage.html"
        }

    })


    // 增加一本图书
    var logo_add = document.getElementsByClassName('logo_add');
    var logo_minus = document.getElementsByClassName('logo_minus');
    for (var i = 0; i < logo_add.length; i++) {
        //设置索引
        logo_add[i].setAttribute("index", i);
        logo_add[i].addEventListener('click', function () {
            //用于解除被禁用的“减号”
            let index = this.getAttribute("index");
            logo_minus[index].removeAttribute("disabled");


            var bookId = this.getAttribute("bookId");
            var cart = JSON.parse(sessionStorage.getItem("cart"));
            axios({
                url: "/addBookToCart",
                method: 'post',
                data: {
                    "bookId": bookId,
                    "cart": cart
                }
            }).then(resp => {
                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                //可以用这个方法,但是我不喜欢，看起来有延迟
                // location.href ="/Cart.html";

                //这个方法看起来很流畅，但是代码很长
                var bookCnt = document.getElementsByClassName("bookCnt");
                var allPrice = document.getElementsByClassName("allPrice");

                var items = resp.data.items
                sessionStorage.setItem("lastName", JSON.stringify(items[bookId].name))
                sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))

                const totalCnt = document.getElementById("totalCnt");
                totalCnt.innerText = JSON.parse(sessionStorage.getItem("cart")).totalCnt;
                const totalPrice = document.getElementById("totalPrice");
                totalPrice.innerText = JSON.parse(sessionStorage.getItem("cart")).totalPrice;

                //获取点击的索引
                let index = this.getAttribute("index");
                //获取这个bookId的cartData
                var cartData = resp.data.items[bookId];


                //展示数据
                bookCnt[index].innerText = cartData.bookCnt;
                allPrice[index].innerText = cartData.book_allPrice;

            })
        });
    }

    //删除一本图书
    var logo_minus = document.getElementsByClassName('logo_minus');
    for (var i = 0; i < logo_minus.length; i++) {
        //设置索引
        logo_minus[i].setAttribute("index", i);
        logo_minus[i].addEventListener('click', function () {

            var bookId = this.getAttribute("bookId");
            var cart = JSON.parse(sessionStorage.getItem("cart"));
            if (cart.items[bookId].bookCnt == 1) {
                alert("亲，数量不能再少了！")
            } else {
                axios({
                    url: "/decreaseBook",
                    method: 'post',
                    data: {
                        "bookId": bookId,
                        "cart": cart
                    }
                }).then(resp => {
                    sessionStorage.setItem("cart", JSON.stringify(resp.data));
                    //可以用这个方法,但是我不喜欢，看起来有延迟
                    // location.href ="/Cart.html";


                    //这个方法看起来很流畅，但是代码很长
                    var bookCnt = document.getElementsByClassName("bookCnt");
                    var allPrice = document.getElementsByClassName("allPrice");

                    var items = resp.data.items
                    sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt));


                    const totalCnt = document.getElementById("totalCnt");
                    totalCnt.innerText = JSON.parse(sessionStorage.getItem("cart")).totalCnt;
                    const totalPrice = document.getElementById("totalPrice");
                    totalPrice.innerText = JSON.parse(sessionStorage.getItem("cart")).totalPrice;

                    //获取点击的索引
                    let index = this.getAttribute("index");
                    //获取这个bookId的cartData
                    var cartData = resp.data.items[bookId];


                    //展示数据
                    bookCnt[index].innerText = cartData.bookCnt;
                    allPrice[index].innerText = cartData.book_allPrice;

                })
            }
        })
    }


    // 对用户点击删除购物车数据做出处理
    var deleteById = document.getElementsByClassName('deleteById');
    for (var i = 0; i < deleteById.length; i++) {
        deleteById[i].addEventListener('click', function () {
            var bookId = this.getAttribute("bookId");
            var bookName = this.getAttribute("bookName")
            var cart = JSON.parse(sessionStorage.getItem("cart"));
            if (confirm("亲，请再次确认是否要删除《" + bookName + "》！")) {
                axios({
                    url: "/deleteCartData",
                    method: 'post',
                    data: {
                        "cart": cart,
                        "bookId": bookId
                    }
                }).then(resp => {
                    sessionStorage.setItem("cart", JSON.stringify(resp.data));

                    var items = resp.data.items
                    sessionStorage.setItem("totalCnt", JSON.stringify(resp.data.totalCnt))
                    //不得不用该方法，不然没法刷新
                    location.href = "/Cart.html";
                })
            }
        });
    }

    //继续购物
    var goOnShopping = document.getElementById('goOnShopping');
    goOnShopping.addEventListener('click', function () {
        axios({})
    })


    // 清空购物车
    var clearAll = document.getElementById('clearAll');
    clearAll.addEventListener('click', function () {
        if (confirm("亲，是否要清空购物车！")) {
            var cart = JSON.parse(sessionStorage.getItem("cart"));
            axios({
                url: "/clearCart",
                method: 'post',
                data: {
                    "cart": cart
                }
            }).then(resp => {
                sessionStorage.setItem("cart", JSON.stringify(resp.data));
                sessionStorage.removeItem("totalPrice");
                sessionStorage.removeItem("totalCnt");
                //不得不用该方法，不然没法刷新
                location.href = "/Cart.html";
            })
        }
    });


    var toPay = document.getElementById("toPay");
    toPay.addEventListener('click', function () {
        /*悬浮窗口的显示,需要将display变成block*/
        document.getElementById("hoverWindow").style.display = "block";
        /*将背景变暗*/
        document.getElementById("window").setAttribute("class", "window_css");
        setTimeout(function () {
            //3秒过后显示支付成功窗口
            paySuccess.style.display = 'block';
            /*关闭悬浮窗口,需要将display变成none*/
            document.getElementById("hoverWindow").style.display = "none";

            axios({
                url: "/updateDataByCart",
                method: "post",
                data: {
                    "cart": JSON.parse(sessionStorage.getItem("cart"))
                }
            })
            sessionStorage.setItem("myOrder", sessionStorage.getItem("cart"));
            sessionStorage.removeItem("cart");
            sessionStorage.removeItem("totalPrice");
            sessionStorage.removeItem("totalCnt");

        }, 3000)

    });
    //支付成功，点击确定事件，实现页面刷新
    let paybtn = document.querySelector('.paybtn');
    let paySuccess = document.querySelector('.paySuccess');
    paybtn.addEventListener('click', function () {
        paySuccess.style.display = 'none';
        window.location.href = '/Cart.html'
    })

    var cancel_img = document.getElementById("cancel_img");
    cancel_img.addEventListener('click', function () {
        /*关闭悬浮窗口,需要将display变成none*/
        document.getElementById("hoverWindow").style.display = "none";
        /*将背景恢复*/
        document.getElementById("window").removeAttribute("class", "window_css");
    });


</script>

</body>
</html>